<template>
  <div id="ckEditor">
    <ckeditor
      id="ckeditor"
      v-model="editorData"
      :editor="editor"
      :config="editorConfig"
    />
  </div>
</template>

<script>
/**
 * have to install
 * package.json
 *  "@ckeditor/ckeditor5-adapter-ckfinder": "^29.0.0",
    "@ckeditor/ckeditor5-build-classic": "^29.0.0",
    "@ckeditor/ckeditor5-vue2": "^1.0.5",
 *
 */
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from '@ckeditor/ckeditor5-vue2'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
const upload = require('./upload')
export default {
  name: 'ClassicEditor',
  components: {
    ckeditor: CKEditor.component
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },

  data() {
    return {
      editor: ClassicEditor,
      editorData: this.content,
      editorConfig: {
        placeholder: this.placeholder,
        language: 'zh-cn',
        extraPlugins: [upload.MyCustomUploadAdapterPlugin]
      }
    }
  },
  watch: {
    content(newVal, olVal) {
      this.content = newVal
    }
  },

  methods: {
    getContent() {
      return this.editorData
    },
    setContent(val) {
      this.editorData = val
    }
  }
}
</script>

<style>
.ck-editor__editable {
  min-height: 400px;
  /* max-height: calc(100vh - 500px); */
  height: 100%;
}
</style>
